<!DOCTYPE html>
<html lang="en">
<head>
	<title>three.js webgl - materials - video</title>
	<meta charset="utf-8" />
	<meta
			name="viewport"
			content="width=device-width, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0"
	/>
</head>
<body>
<div>
	<button class="player" @click="$refs.video.play()">播放</button>
</div>
<video
		preload
		ref="video"
		controls
		loop
		style="width: 100%; visibility: hidden; position: absolute"
		src="./xxxxxxxx.mp4"
		class="my_video"
></video>

<canvas
		style="width: 100%; height: 100vh"
		width="1920"
		height="823"
		ref="canvas"
		class="my_canvas"
></canvas>
<!-- Import maps polyfill -->
<!-- Remove this when import maps will be widely supported -->
<script
		async
		src="https://unpkg.com/es-module-shims@1.6.3/dist/es-module-shims.js"
></script>
<script src="./360_video-umd.js"></script>
</body>
</html>
